<!--督导信息管理-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
     <el-upload class="upload-demo"
        action="string" :show-file-list="false"
        :on-change="beforeUpload" multiple
        ref="uploadRef"
        :auto-upload="false" accept=".png,.jpg" >
        <span slot="trigger" class="upload-button">选择多文件</span>
      </el-upload>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  class="table-data">
        <el-table-column prop="name" label="文件名" align="center"> </el-table-column>
        <el-table-column prop="size" label="大小" align="center">
          <template slot-scope="scope">
            {{Math.round(scope.row.size/1024)}}KB
          </template>
        </el-table-column>
        <el-table-column prop="courseName" label="操作" align="center" width="200">
          <span slot-scope="scope" class="small-btn delColor" @click="delImg(scope.row.uid)">
              <img src="../../../assets/assessment/icon-delete.png"> 删除
          </span>
        </el-table-column>
      </el-table>
    </div>
    <div class="export-button" @click="upLoadApi">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>开始上传</span>
    </div>
     <div class="button-group">
        <div class="" @click="cancelInfo">取消</div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [],
      fileList:[],
    };
  },
  methods: {
    delImg(uid){
      let file = [];
      let fileList = this.fileList
      file = fileList.filter(item=>item.uid !== uid)
      this.fileList = file;
      this.tableData = file
      const index = this.$refs.uploadRef.uploadFiles.findIndex(e => e.uid === uid);
      this.$refs.uploadRef.uploadFiles.splice(index, 1);
    },
    beforeUpload(file,fileList){
      fileList.forEach((item,index) => {
        if(item.name.indexOf("jpg") == -1 && item.name.indexOf("png") == -1){
          this.$message.error('请上传图片或word');
          this.$refs.uploadRef.uploadFiles.splice(index, 1);
        }else{
          this.fileList = fileList;
          this.tableData = this.fileList;
        }
      });
    },
    upLoadApi(){
      let formData = new FormData();
      let files = []
      this.fileList.forEach(file => {
        files.push(file.raw)
      });
      formData.append('files',files);
      let requestUrl = this.$store.state.studentUrl.baseUrl+'/sysTeacherInfo/batch/upload';
      axios.post(requestUrl,formData, { headers: { 'Content-Type': 'multipart/form-data'}}).then(res => {
        if(res.data.success){
            this.$message.success('上传成功！')
        }
      }).catch(error => {
        this.$message.error('上传失败');
      })
    },
    cancelInfo(){
      this.$router.push({
        path:'/teacher/foundation/list'
      })
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.search-container {
  justify-content: flex-start !important;
}
.upload-button {
  cursor: pointer;
  box-sizing: border-box;
  padding: 4px 17px;
  background: #EBE6FF;
  border: 1px solid #5230E9;
  border-radius: 6px;
  color: #5230E9;
}
.delColor{
  background: #FFEFEF;
  border: 1px solid #FA5339;
  color: #FA5339;
}
</style>
